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CAPÍTULO 1 


Sobre o autor 


Desde o momento em que escrevi minha primeira linha de código em um 
projetinho Android de estudos me senti completamente empolgado com as 
diversas possibilidades de aplicações que poderia desenvolver e resolvi mer- 
gulhar nesse mundo e aprender tudo o que pudesse sobre esse universo. 

Naquele momento, cursava meu último ano da graduação no IME-USP 
e estava pesquisando o que faria no meu projeto de conclusão de curso. Não 
tive dúvidas: queria fazer algo com Android, pois teria uma chance para me 
dedicar a aprendê-lo a fundo. No fim das contas, acabamos fazendo em du- 
pla um otimizador de rotas, onde tive meu primeiro contato com algumas 
tecnologias do Android, como o atual Google Cloud Messaging. 

Ao término da graduação, senti a necessidade de participar de algum pro- 
jeto open source, porém queria algo no qual eu realmente pudesse fazer dife- 
rença e que fosse divertido também, então comecei a pesquisar como deveria 
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fazer para participar do código-fonte do Android. Algumas noites mal dor- 
midas (e gigabytes de download) depois e já tinha tudo configurado para o 
meu primeiro commit no Android Open Source Project. 

Paralelamente a isso, lia alguns textos sobre desenvolvimento de jogos e 
resolvi entrar nessa área, porém muito material que via era focado no uso de 
algum framework, de modo que até mesmo aquele jogo mais simples preci- 
sava de um caminhão de API para ser desenvolvido. Neste momento, resolvi 
tentar fazer jogos simples graficamente, sem o uso de frameworks, e tive bas- 
tante êxito, rendendo um convite para palestrar no Conexão Java e um jogo 
publicado no Google Play com mais de 100 mil downloads. 

Atualmente sou desenvolvedor e instrutor na Caelum apaixonado pelo 
mundo mobile, dedico um tempo ajudando a desenvolver o código-fonte do 
Android e muito do que aprendi durante esses anos de estudo está comparti- 
lhado neste livro. 


CAPÍTULO 2 


Por que um jogo mobile? 


Somente em um ano, dentro da indústria de jogos mobiles, temos fatura- 
mento em dólares como: 


e Ojogo Clash of Clans recebeu 800 milhões. 
e A saga Candy Crush faturou 300 milhões. 


e A série Angry Birds ganhou 195 milhões. 


A venda de smartphones e tablets vem aumentando cada vez mais, tor- 
nando seus usuários um grande público não só para aplicativos mas também 
para jogos. Muitas das grandes desenvolvedoras de games como EA, Game- 
loft e Ubisoft já perceberam isso e contam com divisões inteiras destinadas 
somente ao desenvolvimento de games para plataformas móveis. 
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Não há como ignorar o tamanho desse mercado. Disponibilizar, ou não, 
uma versão mobile de um jogo é a diferença entre estar neste mercado bilio- 
nário ou ficar de fora. 


Como este livro está organizado? 


Este livro está organizado em capítulos focados na programação dos di- 
versos elementos do nosso jogo e, principalmente, na teoria por trás do có- 
digo. Dessa forma, em vez de simplesmente replicarmos o código apresen- 
tado, entenderemos o que se passa e teremos condições de criarmos nossos 
próprios jogos! 


Como será o nosso jogo? 


Um jogo que se destacou bastante e ganhou notoriedade na mídia foi o 
Flappy Bird, criado em apenas três dias pelo vietnamita Dong Nguyen, que 
chegou a faturar 120 mil reais por dia com anúncios. Como o Flappy Bird 
apresenta os principais elementos de um jogo (e é bem divertido), vamos criar 
a nossa versão desse game: o Jumper! 

Agora que temos uma ideia do jogo que faremos, uma dúvida que apa- 
rece é: o que vamos usar para criar nosso game? Uma rápida busca na internet 
pelo tema “ferramentas para jogos Android” pode revelar inúmeras alterna- 
tivas e nos deixar confusos: será que devemos usar libGDX ou Unity com 
Chipmunk? Será que o Cocos2D não seria melhor? 

A pergunta que devemos fazer é: sempre teremos que usar algum fra- 
mework para desenvolvimento de jogos? Muitas vezes, não. 

Os frameworks podem nos ajudar em vários aspectos do desenvolvi- 
mento de um jogo, porém, para muitos jogos eles não são necessários. No 
nosso Jumper, não utilizaremos nenhuma ferramenta específica para jogos, 
apenas as funcionalidades que a API do Android nos oferece! Dessa forma, 
podemos aprender os conceitos por trás de um jogo e entender as vantagens 
e desvantagens de utilizar um framework. 


CAPÍTULO 3 


Começando o Jumper 


3.1 CRIANDO O PROJETO E A TELA PRINCIPAL 


Como o Jumper é um jogo para Android, vamos criar um novo projeto no 
Android Studio. Para isso, vamos a File -> New Project e preenchere- 
mos os campos Application Name e Company Domain: 
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New Project 


Android Studio 





| 
Configure your new project 


Application name: Jumper 
| 





Company Domain: casadocodigolcom. be 





Package name: treomcasad mp Edit 


Fig. 3.1: Tela de criação do projeto no Android Studio. 


No nosso jogo, teremos uma View com um pássaro, canos e um back- 
ground com nuvens. Como o Android não a possui por padrão, vamos preci- 
sar criar nossa própria View customizada. 

Para implementá-la, podemos criar uma classe filha de view ou de 
SurfaceView. A diferença entre elas é que, enquanto a View faz todos os 
desenhos na UTIhread, a SurfaceView disponibiliza uma thread para que 
possamos fazer operações mais pesadas em segundo plano sem comprometer 
a usabilidade da aplicação. Como nosso jogo terá elementos dispostos na tela 
em posições calculadas, teremos que utilizar uma SurfaceView. 

Para criar nosso próprio componente de View, vamos criar uma classe 
chamada Game no pacote br.com.casadocodigo. jumper.engine, 
herdar de surfaceView e implementar seu construtor: 


public class Game extends SurfaceView 1 


public Game (Context context) 1 
super (context); 


Agora que temos nossa View, precisaremos vinculá-la a uma Activity. 
Quando criamos nosso projeto, o próprio assistente já criou uma Activity 
chamada MainActivity e um layout chamado activity::main.xml. 
Vamos alterar esse layout para conter apenas um “espaço vazio” (um 
FrameLayout com oid container), no qual colocaremos nossa View cus- 
tomizada: 
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<FrameLayout xmins:android= 
"http: //schemas.android.com/apk/res/android" 
android: id="0+id/container" 
android: layout width="match parent" 
android:layout height='"match parent'! /> 


Para adicionar o SurfaceView ao FrameLayout, precisaremos ins- 
tanciar nossa classe Game e chamar o método addView. Isso será feito no 


onCreate da nossa MainActivity: 


protected void onCreate (Bundle savedInstance) { 
super. onCreate (savedInstance) ; 
setContentView(R.layout.activity main); 


FrameLayout container = 
(FrameLayout) findViewById(R.id.container); 


Game game = new Game(this); 


container .addView(game) ; 


Como nossa SurfaceView não faz nada, ao rodar o jogo será exibida 
uma tela preta e a barra superior, contendo o nome da nossa aplicação: 
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O PAR 





Fig. 3.2: Nossa SurfaceView até o momento. 


Uma decisão importante que temos que tomar ao criar um jogo diz res- 
peito à orientação da tela: devemos deixá-la na posição vertical (portrait) ou 
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horizontal (landscape)? Muitos jogos precisam de espaço horizontal para exi- 
bir elementos gráficos como placar, vidas, inimigos. Já outros não têm essa 
necessidade e optam pela orientação vertical. No caso do Jumper, vamos fixar 
a orientação na vertical (portrait). 

No AndroidManifest .xml temos o registro de todas as activities da 
nossa aplicação. No nosso caso, como temos apenas a MainActivity, po- 
demos vê-la registrada na tag <activity>. Como queremos fixar sua ori- 
entação, podemos utilizar a propriedade android:screenOrientation 
e defini-la como portrait: 


<activity 
android:name="br.com.casadocodigo. jumper. MainActivity" 
android:label="Qstring/app name" 
android: screenOrientation="portrait'"> 


Seria interessante removermos a barra superior da nossa aplicação 
para que nosso jogo possa ser exibido em fullscreen. Por padrão, na tag 
<application>,no AndroidManifest .xml,o Android define um ícone, 


o nome da aplicação e um tema que contém a barra superior: 


<application 
android: icon="Qdrawable/ic launcher' 
android:label="Qstring/app name" 
android: theme="Qstyle/AppTheme!!> 


Para deixar nosso jogo em fullscreen teremos que alterar esse tema para: 


android: theme="Qandroid:style/Theme. NoTitleBar.Fullscreen" 


Com isso, ele será exibido em fullscreen e em modo portrait! 
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Fig. 3.3: SurfaceView em tela cheia. 


Até o momento, não temos um jogo dos mais desafiadores. A seguir, va- 
mos criar os elementos do Jumper para deixá-lo mais emocionante! 
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3.2 CRIANDO O LOOP PRINCIPAL DO JUMPER 


Um jogo é composto por vários quadros (ou frames), sendo que cada frame 
representa uma configuração dos seus elementos naquele momento especí- 
fico. Porém, para dar a noção de movimento e animação, em um segundo 
muitos desses frames devem ser exibidos. A maioria dos jogos trabalha com 
uma quantidade de 60 FPS (frames por segundo). 

Para criarmos esses frames, precisaremos de uma estrutura que fique ro- 
dando enquanto o jogo estiver sendo utilizado. Essa estrutura é chamada de 
loop principal do jogo. Nesse loop faremos os desenhos dos elementos do 
nosso jogo, atualizaremos a pontuação do jogador, verificaremos se houve 
colisão, enfim, gerenciaremos todos os aspectos dinâmicos do Jumper. 

Como nossa classe Game é um SurfaceView, podemos utilizar uma 
thread separada para o nosso loop principal. Na classe Game vamos imple- 
mentar a interface Runnable: 


public class Game extends SurfaceView implements Runnable { 


QUverride 
public void run O € 
// Aqui vamos implementar o loop principal do nosso jogo! 


Enquanto o usuário náo sair do jogo, vamos deixar o loop rodando. Para 
isso, vamos criar uma variável boolean que indica se o jogo deve rodar ou náo: 


public class Game extends SurfaceView implements Runnable { 
private boolean isRunning - true; 
QUverride 
public void run() { 


while(isRunning) f 
//Neste loop vamos gerenciar os elementos do Jumper. 
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O que acontecerá com o nosso loop quando o jogador deixar a aplicação? 

Até o momento, quando o jogador sair do Jumper, o jogo continuará ro- 
dando pois a thread não foi parada! Isso pode consumir recursos do aparelho 
desnecessariamente. 

Precisamos controlar o início e pausa do loop do jogo. Porém, como po- 
demos saber que o jogador saiu da nossa aplicação? Utilizando o ciclo de vida 
da MainActivity! 


No onPause, vamos pausar a thread do jogo: 


public class MainActivity extends Activity { 
QUverride 
protected void onPause() { 
super.onPause(); 
game.cancela(); 


Na nossa classe Game ainda não temos o método cancela. Vamos 
implementá-lo agora: 


public class Game extends SurfaceView implements Runnable { 


public void cancela() { 
this.isRunning = false; 


Agora podemos pausar nosso loop ao deixar a aplicação, mas como fare- 
mos para rodá-lo novamente? Como podemos saber que o jogador voltou ao 
nosso jogo? No onResume da MainActivity! 

Vamos iniciar o loop principal no Jumper no onResume da 


MainActivity: 


public class MainActivity extends Activity { 
QUverride 
protected void onResume() { 
super. onResume() ; 
game. inicia(); 
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new Thread(game) .start(); 


O método inicia fica assim: 


public class Game extends SurfaceView implements Runnable { 


public void inicia() { 
this. isRunning = true; 


Com o loop principal funcionando, podemos criar os elementos do jogo! 


3.3 COMO DESENHAR ELEMENTOS NO SURFACEVIEW? 


Para desenhar algo em um SurfaceView precisamos ter acesso ao objeto 
responsável por renderizar elementos na tela: o canvas. Com esse objeto, po- 
demos desenhar formas geométricas ou até mesmo bitmaps. 

Desenhar elementos em um canvas consome um tempo de alguns milis- 
segundos que já é o suficiente para o nosso olho perceber que um quadro está 
sendo substituído por outro. Enquanto o canvas não está pronto, a tela fica 
preta, por um período muito curto, criando o efeito de tela “piscante” cha- 
mado flickering. 

Para não termos que nos preocupar com isso, o Android já tem uma forma 
de evitar esse flickering: enquanto um quadro está sendo exibido para o jo- 
gador, um novo está sendo desenhado em segundo plano. Quando o novo 
quadro está pronto, o Android só troca o velho pelo novo. A única coisa que 
temos que fazer é pegar o canvas para desenhar e, quando tudo estiver pronto, 
exibi-lo. 

Para termos acesso ao canvas, precisamos de um objeto que permita a 
edição de cada pixel da nossa tela. Esse objeto é o SurfaceHolder. Como 
estamos em um SurfaceView, para obtermos acesso ao SurfaceHolder, 
basta chamar o método getHolder: 


public class Game extends SurfaceView implements Runnable{ 
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private final SurfaceHolder holder = getHolder(); 


Por meio desse SurfaceHolder teremos acesso ao canvas! Para isso, 
basta chamar o método lockCanvas dentro do loop principal no nosso jogo: 


public class Game extends SurfaceView implements Runnable{ 
private final SurfaceHolder holder = getHolder(); 


GOverride 
public void run() { 
while(isRunning) 1 
Canvas canvas = holder.lockCanvas(); 


Além disso, quando terminarmos de desenhar os elementos no nosso 
canvas, vamos liberá-lo para a tela do jogador por meio do método 


unlockCanvasAndPost 


public class Game extends SurfaceView implements Runnable{ 
private final SurfaceHolder holder = getHolder(); 
QUverride 
public void run() { 
while(isRunning) 1 
Canvas canvas = holder.lockCanvas(); 


//Aqui vamos desenhar os elementos do jogo! 


holder .unlockCanvasAndPost (canvas); 


Ao chamar o getHolder, precisamos garantir que temos acesso ao 
SurfaceHolder antes de começarmos a desenhar. Do contrário, tomare- 
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mos um NullPointerException. A forma mais simples para ter certeza de que 
só vamos desenhar quando nosso holder estiver pronto para isso é uma 
verificação em nosso loop: 


public class Game extends SurfaceView implements Runnable{ 
QUverride 
public void run() { 


while(isRunning) { 
if (!holder.getSurface() .isValid()) continue; 


//Restante do código... 


3.4 CRIANDO NOSSO PRIMEIRO ELEMENTO DO JUM- 
PER: A CLASSE PASSARO 


Vamos criar o principal componente do nosso jogo: o pássaro. Para isso, cri- 
aremos uma classe Passaro. Inicialmente, vamos utilizar alguma forma 
simples para representar nosso pássaro: um círculo. Além disso, ele terá a cor 
vermelha. 


Para desenhar um círculo vermelho na tela, utilizamos um método da 


classe Canvas chamado drawCircle: 


public class Passaro { 


private static final int X = 100; 
private static final int RAIO = 50; 


private int altura; 


public Passaro() 1 
this.altura = 100; 
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public void desenhaNo (Canvas canvas)( 
canvas.drawCircle(X, altura, RAIO, ??); 


Para criarmos a cor vermelha, vamos utilizar a classe Paint. Como tam- 
bém serão usadas outras cores ao longo do jogo, vamos centralizá-las em uma 
classe chamada Cores. Nesta classe, teremos o método getCorDoPassaro 
que retornará um Paint representando a cor vermelha: 


public class Cores { 


public static Paint getCorDoPassaro() 1 
Paint vermelho = new Paint (); 
vermelho. setColor (0xFFFFO000) ; 
return vermelho; 


Veja que a cor vermelha (oxFFo000) é representada como oxFFFF0000. 
Esses dois primeiros valores representam a quantidade de opacidade da cor, 
sendo que FF significa o máximo de opacidade (ou o mínimo de transparên- 
cia) possível. Esse formato que permite controlar a transparência da cor é 
chamado de ARGB. 


Com o método getCorDoPassaro pronto, basta chamá-lo na classe 


Passaro: 


public class Passaro { 


private static final Paint vermelho = 
Cores.getCorDoPassaro(); 


private static final int X = 100; 
private static final int RAIO = 5O; 


private int altura; 


public Passaro() { 
this.altura = 100; 
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public void desenhaNo(Canvas canvas) { 
canvas.drawCircle(X, altura, RAIO, vermelho); 


Tendo o método desenhaNo, vamos chamá-lo no loop principal da 
nossa classe Game: 


public class Game extends SurfaceView implements Runnable{ 
private Passaro passaro; 


QUverride 
public void run() { 
while(isRunning) { 
if (!holder.getSurface() .isValid()) continue; 


canvas = holder. lockCanvas(); 
passaro .desenhaNo (canvas); 


holder .unlockCanvasAndPost (canvas); 


Perceba que em nenhum momento instanciamos a classe Passaro. 
Onde podemos fazer isso? 

Temos que tomar bastante cuidado onde daremos new nos nossos ele- 
mentos. Será que precisaremos de um novo Passaro a cada loop? Não. 
Dessa forma, sempre manipularemos a mesma instância de Passaro! Caso 
instanciemos o Passaro dentro do loop, criaremos muitos objetos na me- 
mória do aparelho, causando uma lentidão no nosso jogo! 

Sendo assim, vamos criar um método inicializaElementos e 
chamá-lo no construtor da nossa classe Game: 
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public class Game extends SurfaceView implements Runnable{ 
private Passaro passaro; 
public Game (Context context) 1 


super (context); 
inicializaElementos(); 


private void inicializaElementos() 1 


this.passaro = new Passaro(); 


Ao rodar o Jumper, teremos a seguinte tela: 
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Fig. 3.4: Nosso pássaro na tela do jogo. 


Temos nosso primeiro elemento sendo desenhado na tela, porém ele está 
estático. No decorrer do jogo, o que acontece com o pássaro? Ele cai. Vamos 
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implementar isso! 


3.5 CRIANDO O COMPORTAMENTO PADRÃO DO PÁS- 
SARO: O MÉTODO CAI 


No loop principal, além de desenhar o Passaro, vamos fazê-lo cair por meio 


do método cai: 


public class Game extends SurfaceView implements Runnable{ 
QUverride 
public void run() { 
while(isRunning) 1 
if (!holder.getSurface() .isValid()) continue; 


canvas = holder.lockCanvas(); 


passaro. desenhaNo (canvas); 
passaro.cai(); 


holder .unlockCanvasAndPost (canvas); 


Faremos o pássaro cair 5 pixels a cada chamada ao método cai. Sendo 


assim, nossa implementação do método cai deve ser a seguinte: 


public class Passaro { 
private int altura; 


public void cai() { 
this.altura += 5; 


Isso é o suficiente para derrubarmos o pássaro a cada iteração do nosso 
loop principal. 
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CAPÍTULO 4 


Colocando uma imagem de 
fundo 


Temos nosso pássaro desenhado na tela. Porém, ao implementarmos o mé- 
todo cai, criamos um rastro indesejado. Como poderemos resolver isso? 

Vimos que a classe SurfaceView (mãe da nossa classe Game) é a res- 
ponsável por desenhar os elementos do nosso jogo na tela e que, ao fazer o 
desenho, essa classe não manipula os pixels que estão sendo visualizados pelo 
jogador; o desenho é feito em segundo plano e então exibido ao jogador. 

Essa estrutura, que foi tão útil para evitar bugs de atualização da tela (flic- 
kering), também é responsável por deixar o rastro dos elementos! 

Quando o Android troca o frame que está em primeiro plano para aquele 
que está em segundo plano (e vice-versa), ele não limpa o conteúdo anteri- 
ormente desenhado! É exatamente esse conteúdo “desatualizado” que vemos. 
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Perceba que o rastro da bola é formado pelas suas posições anteriormente 
desenhadas. 





Fig. 4.1: Rastro da bolinha ao cair. 
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Vamos corrigir esse problema colocando uma imagem que ocupe a tela 
inteira. Dessa forma, vamos ocultar as imagens “desatualizadas” e deixar ape- 
nas a figura atual da bola. Será o background do nosso jogo! 





ARQUIVOS USADOS NO JOGO 


Os arquivos que usaremos ao longo desse livro podem ser baixados 
em https://github.com/felipetorres/jumper-arquivos. 











Como o background do Jumper será uma imagem, vamos precisar de um 
drawable para usar no nosso código. Onde podemos colocar essa imagem, já 
que existem várias pastas drawable? 

Muitas vezes é importante ter controle sobre como as imagens serão re- 
dimensionadas pelo Android. Cada qualifier presente nas pastas drawable 
(mdpi, hdpi, xhdpi etc.) representa um tipo de densidade de tela (medium, 
high, extra high) que necessita de uma resolução e tamanho específicos. Po- 
demos criar um tamanho do nosso background para cada tipo de tela ou re- 
dimensionarmos via código, diminuindo o tamanho da app. É o que faremos. 

Para isso, precisaremos dizer ao Android não redimensionar automatica- 
mente nosso background. Nesses casos, devemos colocar nossa imagem na 
pasta drawable-++nodpix+*. Não se preocupe caso esta pasta não exista; 
basta criá-la no diretório res. 


Na classe Game podemos pegar a imagem utilizando o método 





decodeResource da classe BitmapFactory: 


this.background = BitmapFactory.decodeResource (getResources(), 
R.drawable.background) ; 


Agora, podemos desenhar esse background no loop principal do nosso 
jogo utilizando o método drawBitmap do canvas. Perceba que os dese- 
nhos são feitos em camadas: os desenhos que são feitos primeiro ficam abaixo 
dos seguintes, logo nosso background tem que ser a primeira coisa a ser de- 
senhada na tela: 


COverride 
public void run() { 
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while(isRunning) { 
if (!holder.getSurface() .isValid()) continue; 
canvas = holder. lockCanvas(); 


canvas.drawBitmap (background, O, O, null); 
//código de desenho do pássaro... 


holder .unlockCanvasAndPost (canvas); 
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Fig. 4.2: Background adicionado ao jogo. 


Precisamos redimensionar nosso background para que ele ocupe todo o 
espaço vertical da tela. Porém, para definirmos a altura dessa imagem, deve- 
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mos saber a altura da tela; vamos utilizar a classe WindowManager para nos 
fornecer essas informações. 


WindowManager wm = (WindowManager) context .getSystemService( 
Context . WINDOW SERVICE); 


Com essa classe, podemos obter as dimensões da tela por meio do método 
getDefaultDisplay e do método getMetrics: 


WindowManager wm = (WindowManager) context .getSystemService( 
Context. WINDOW SERVICE); 

Display display = wm.getDefaultDisplay 0); 

metrics = new DisplayMetrics(); 

display .getMetrics(metrics); 


Ao executar esse código, as dimensões da tela estarão no objeto 
DisplayMetrics. Para recuperar a altura da tela, basta chamar o método 
heightPixels navariável metrics: 


int alturaDaTela = metrics .heightPixels; 


Vamos centralizar essas operações em uma classe chamada Tela com 


um método getAltura: 


public class Tela { 
private DisplayMetrics metrics; 


public Tela(Context context) 1 
WindowManager wm = (WindowManager) context.getSystemService( 
Context . WINDOW SERVICE); 
Display display = wm.getDefaultDisplay 0); 
metrics = new DisplayMetrics(); 
display.getMetrics(metrics); 


public int getAlturaQ) { 
return metrics.heightPixels; 
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Com essa classe, podemos redimensionar nosso background da classe 
Game chamando o método createScaledBitmap: 


Bitmap back = BitmapFactory.decodeResource (getResources(), 
R.drawable. background) ; 
this.background = Bitmap.createScaledBitmap (back, 
back.getWidth(), tela.getAltura(), false); 


Como queremos redimensionar a imagem apenas na vertical, vamos 
manter a largura original do background. Para capturar essa largura, basta 
chamar o método getWwidth. 

Isso é o suficiente para nossa imagem de fundo ficar com a seguinte apa- 
rência: 
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Fig. 4.3: Background ocupando a tela inteira. 
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4.1 IMPLEMENTANDO O CONTROLE DO JOGADOR: O 
PULO DO PÁSSARO 


Neste momento, o elemento Passaro não deixa na tela mais nenhum rastro 
visível ao jogador! Podemos nos dedicar ao seu movimento. O único controle 
disponível ao jogador do Jumper será o toque na tela (não teremos nenhum 
outro botão) que fará o pássaro pular. 

Para implementar o pulo do pássaro, basta deslocá-lo uma quantidade 
de pixels para cima. Vamos fazer isso criando o método pula na classe 


Passaro: 


public class Passaro { 
Ifisi 


public void pula() { 
this.altura -= 150; 


Note que o método pula diminui a altura em 150 pixels. Como o ponto 
(0,0) representa o canto superior esquerdo da tela, ao decrementar a altura, 
estamos fazendo o pássaro ser deslocado para cima! 

Em que momento vamos chamar esse método pula? Quando o jogador 
tocar a View do jogo! 

Para isso, temos que implementar o método onTouch na classe que re- 
presenta a View do nosso jogo: a classe Game. Para termos acesso ao mé- 
todo onTouch, vamos dizer que essa classe deve implementar a interface 


onTouchListener 


public class Game extends SurfaceView implements Runnable, 
OnTouchListener { 


@Override 


public boolean onTouch(View v, MotionEvent event) { 
return false; 
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Neste método, basta chamar o pula do objeto passaro: 


public class Game extends SurfaceView implements Runnable, 
OnTouchListener { 


QUverride 

public boolean onTouch(View v, MotionEvent event) { 
passaro .pula(); 
return false; 


Implementamos o listener, porém isso não é suficiente para que o método 
onTouch seja chamado sempre que o jogador tocar na nossa View, pois em 
nenhum momento dissemos qual View deverá chamar esse on Touch. Vamos 
fazer isso com o método setOnTouchListener. 

Como nossa classe Game é uma View, podemos chamar esse método 
diretamente no seu construtor: 


public class Game extends SurfaceView implements Runnable, 
OnTouchListenert 


public Game(Context context) 1 
super (context); 
LE 


setOnTouchListener (this); 


Com isso, finalizamos o controle do jogador! Contudo, ainda temos al- 
guns outros elementos neste jogo. 
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Criando o cano inferior 


Além do pássaro, o Jumper também possui outro elemento a ser desenhado na 
tela: os canos! Como aproximamos inicialmente o pássaro para uma bolinha, 
vamos aproximar os canos para retângulos. 

Assim como feito com o pássaro, nosso objetivo será desenhar os canos 


no loop principal da classe Game, algo como: 


public class Game extends SurfaceView implements Runnable, 
OnTouchListenert 


QOverride 
public void run() 1 
while(isRunning) 1 


//lockCanvas e desenhos anteriores... 
cano. desenhaNo (canvas); 
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//unlock... 


Vamos criar uma classe Cano contendo o método desenhaNo. Além 
disso, vamos definir o cano com 250 pixels de altura e 100 pixels de largura: 


public class Cano { 


private static final int TAMANHO DO CANO 
private static final int LARGURA DO CANO 


250; 
100; 


public void desenhaNo (Canvas canvas) { 
//Como será o desenho do cano? 


Primeiramente, vamos criar o cano inferior com o método 
desenhaCanoInferiorNo. Para desenhar um retângulo, chamaremos o 


método drawRect da classe Canvas: 


public class Cano { 


public void desenhaNo (Canvas canvas) { 
desenhaCanoInferiorNo(canvas) ; 


private void desenhaCanoInferiorNo (Canvas canvas) { 


canvas.drawRect(??, ??, ??, ??, 7); 


Para desenhar um retângulo com o método drawRect, precisamos pas- 
sar as coordenadas (x,y) de dois pontos: o canto superior esquerdo e o canto 
inferior direito. 


No entanto, quais serão esses pontos? 


32 


Casa do Código Capítulo 5. Criando o cano inferior 





O canto inferior direito do cano deve estar na base da tela, ou seja, deve 
ter a mesma altura da tela (lembre-se de que o ponto (0,0) está no topo da 
tela). Como já conseguimos pegar a altura da tela, podemos passá-la para o 


drawRect: 


canvas.drawRect(??, ??, ??, tela.getAltura(), 77); 


O cano deve ter 250 pixels de altura, logo deve acabar 250 pixels antes da 
base da tela. Basta subtrair 250 pixels da altura da tela e teremos o segundo 


parâmetro do cano: 


int alturaDoCanoInferior = 
tela.getAltura() - TAMANHO DO CANO; 


public class Cano { 


private static final int TAMANHO DO CANO = 250; 
private int alturaDoCanoInferior; 
private Tela tela; 


public Cano(Tela tela) 1 
this.tela = tela; 
this.alturaDoCanoInferior = 
tela.getAltura() - TAMANHO DO CANO; 


private void desenhaCanoInferiorNo (Canvas canvas) 1 
canvas.drawRect (??, alturaDoCanoInferior, ??, 
tela.getAltura(), 77); 


Até esse momento, limitamos a altura do cano. Porém, como limitaremos 
a sua largura? O primeiro e terceiro argumentos do drawRect se referem 
justamente a isso! 

Temos que desenhar esse cano de tal forma que sua posição horizontal 
possa variar, pois afinal de contas, ele deverá se mover para a direção do pás- 
saro. Vamos receber essa posição no construtor do Cano: 
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public class Cano { 


private static final int TAMANHO DO CANO = 250; 
private int alturaDoCanoInferior; 

private Tela tela; 

private int posicao; 


public Cano(Tela tela, int posicao) 1 
this.tela = tela; 
this.posicao = posicao; 
this.alturaDoCanoInferior = 
tela.getAltura() - TAMANHO DO CANO; 


private void desenhaCanoInferiorNo (Canvas canvas) { 
canvas.drawRect (posicao, alturaDoCanoInferior, ??, 
tela.getAltura(), 77); 


Agora temos que a lateral esquerda do Cano começará em posicao, 
só precisamos definir onde ficará a lateral direita desse Cano. Inicialmente, 
definimos que ele deveria ter 100 pixels de largura, o que significa que a lateral 
direita deverá ficar a 100 pixels da posicao! 


public class Cano { 


private static final int TAMANHO DO CANO 
private static final int LARGURA DO CANO 


250; 
100; 


public Cano(Tela tela, int posicao) 1 
this.posicao = posicao; 
this.alturaDoCanoInferior = 

tela.getAltura() - TAMANHO DO CANO; 


private void desenhaCanoInferiorNo (Canvas canvas) { 
canvas.drawRect (posicao, alturaDoCanoInferior, 
posicao + LARGURA DO CANO, tela.getAltura(), 27); 
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Com isso, só precisamos definir a cor que esse elemento terá. 


Todo elemento desenhado no canvas pode receber uma cor por meio 
de um Paint. Da mesma forma que fizemos com o Passaro, vamos criar 


um método getCorDoCano na classe Cores: 


public class Cores { 


public static Paint getCorDoCano() 1 
Paint verde = new Paint(); 
verde. setColor (0xFFOOFFOO) ; 
return verde; 


Definimos a cor verde para o Cano (ooFFoo), porém lembre-se de que a 
cor deve estar no formato ARGB, que permite o uso de transparência. Neste 
formato, a cor verde é FFooFFoo. 


Com a cor do Cano criada, podemos passá-la para o último argumento 


do seu drawRect: 


public class Cano { 
private final Paint verde = Cores.getCorDoCano(); 
//Códigos anteriores.. 


private void desenhaCanoInferiorNo (Canvas canvas) 1 
canvas.drawRect(..., ..., ..., ..., verde); 


Só precisamos instanciar esse Cano na nossa classe Game dizendo qual 


será sua posição inicial: 


this.cano = new Cano(tela, 200); 
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Com isso, finalizamos a criação do cano inferior do Jumper! 





Fig. 5.1: Jumper com um cano inferior. 
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5.1 MOVIMENTANDO O CANO 


No Jumper, os canos devem se mover na direção do pássaro. Até o momento, 
nosso inimigo está estático na tela. Vamos implementar seu movimento para 
a esquerda. 

Utilizando a mesma ideia da classe Passaro, vamos deslocar esse Cano 
alguns pixels para a esquerda a cada iteração do nosso loop principal. Para 
isso, precisaremos de um método move: 


public class Game extends SurfaceView implements Runnable, 
OnTouchListenert 


QUverride 
public void run() { 
while(isRunning) { 
//lockCanvas... 
//Desenho do pássaro... 


cano. desenhaNo (canvas); 
cano.move(); 


//unlock... 


Como deixamos a posicao do Cano variável e a consideramos para 
fazer a conta da largura, podemos simplesmente alterar essa posicao e o 
Cano se moverá corretamente mantendo sua largura. O método move apenas 


alterará a variável posicao: 


public class Cano { 


[Das 


public void move() 1 
posicao -= 5; 


Isso é o suficiente para movermos o Cano para a esquerda! 
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Criando vários canos 


Ainda temos somente um cano no nosso jogo, além disso ele sai muito rápido 
da tela. Está na hora de colocar um pouco mais de emoção com mais canos. 
Podemos alterar nossa criação de um cano para criar diversos canos, cinco 
por exemplo: 


this.canol = new Cano(tela, 200); 
this.cano2 = new Cano(tela, 450); 
this.cano3 = new Cano(tela, 700); 
this.cano4 = new Cano(tela, 950); 
this.cano5 = new Cano(tela, 1200); 


O código parece feio, uma vez que o estamos copiando e colando por todo 
lado. Vamos criar os canos em um laço, colocando uma distância de 250 pixels 
entre cada um: 
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int posicao = 200; 
for(int i=0; i<b; i++) 1 
posicao += 250; 
Cano cano = new Cano(tela, posicao); 


Mas queremos agora acumular todos esses canos para poder desenhá-los. 
Para isso devemos criar uma List de Canos: 


List<Cano> canos = new ArrayList<Cano>(); 
int posicao = 200; 
for(int i=0; i<b; i++) 1 
posicao += 250; 
Cano cano = new Cano(tela, posicao); 
canos .add(cano) ; 


Pronto, cinco canos em nossas mãos. Só falta desenhá-los. Devemos co- 
locar a lista como variável membro e fazer um for na hora do desenho, mas 
calma lá: nosso código do Game está misturando muita coisa. Tem cano, tem 
pássaro, tem background, tem mais canos, tem touch, start, stop. Vamos iso- 
lar um pouco melhor as coisas. Assim como Cano é um elemento de nosso 
jogo, Canos também parece ser: temos um conjunto de canos no jogo e va- 
mos criar uma classe chamada Canos para representar todos eles, no pacote 
elementos: 


public class Canos { 
private List<Cano> canos = new ArrayList<Cano>(); 


public Canos(Tela tela) { 
int posicaoInicial = 200; 


for(int i=0; i < 5; i++) { 


posicaoInicial += 250; 
canos.add(new Cano(tela, posicaoInicial)); 
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Para tirar a impressão de estarmos usando “números mágicos”, vamos re- 
fatorar e extrair algumas variáveis para dar significado aos números impor- 


tantes do nosso jogo: 


public class Canos { 


private static final int QUANTIDADE DE CANOS = 5; 
private static final int DISTANCIA ENTRE CANOS = 250; 
private final List<Cano> canos = new ArrayList<Cano>(); 


public Canos(Tela tela) { 
int posicaoInicial = 200; 


for(int 1=0; i<QUANTIDADE DE CANOS; i++) 1 
posicaoInicial += DISTANCIA ENTRE CANOS; 
canos .add(new Cano(tela, posicaoInicial)); 


Agora sim, dentro de nosso Game a inicialização dos elementos fica mais 
simples: basta dizer que queremos criar os canos. Removemos o único cano 


que tínhamos e criamos todos eles de uma única vez: 


private Canos canos; 


private void inicializaElementos() 1 
this.passaro = new Passaro(); 
this.canos = new Canos(tela); 
Bitmap back = BitmapFactory.decodeResource (getResources(), 
R.drawable. background) ; 
this.background = Bitmap.createScaledBitmap (back, 
back.getWidth(), tela.getAltura(), false); 


Falta agora desenhar esses cinco canos! Onde antes desenhávamos um 
único cano e o movíamos, chamaremos o método equivalente para todos de 


uma única vez: 
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canos. desenhaNo (canvas); 
canos.move(); 


Claro, os dois métodos ainda não existem em nosso Canos e devemos 


implementá-los, fazendo um loop pelos nossos canos: 


public void desenhaNo (Canvas canvas) { 
for(Cano cano : canos) 
cano .desenhaNo (canvas); 


public void move() { 
for(Cano cano : canos) 
cano.move(); 


Rodamos nosso jogo e agora temos cinco canos! Todos de tamanho igual, 
é verdade, mas já são cinco canos! 
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Fig. 6.1: Nosso jogo com os canos inferiores. 
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6.1 CRIANDO OS LIMITES PARA PULO: O CHÃO E TETO 


Vamos agora limitar nossos saltos e quedas. Primeiramente, quando o pássaro 
tocar na base da tela, devemos parar de cair. 

Como estamos lidando com um círculo, para saber se sua borda toca a 
base da tela basta verificar se a sua altura mais seu RAIO é maior que o 
tamanho da tela: 


public void cai() { 
boolean chegouNoChao = altura + RAIO > tela.getAltura(); 


if (!chegouNoChao) 1 
altura += 5; 


Veja que precisamos de um método que está na classe Tela, porém ainda 
não temos acesso a esse objeto dentro da classe Passaro. Para resolver isso, 
vamos receber a Tela no construtor do Passaro: 


public class Passaro ( 
private Tela tela; 


public Passaro(Tela tela) { 
this.tela = tela; 
LM asas 


//Outros métodos... 


Também não podemos pular além do topo da tela, isso é, temos que ve- 
rificar quando a borda do nosso círculo toca o topo da tela. Como o topo da 
tela tem altura iguala zero, nosso círculo tocará o topo da tela sempre que 
sua altura for igual ao seu próprio RAIO. Logo, seessa altura for maior, 
sabemos que ele ainda não está no topo. Lembre-se que quanto maior a altura, 
mais para baixo da tela o elemento está ((0,0) é o canto superior esquerdo!). 
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Nosso método pula, para verificar se chegamos ao topo da tela, deve 
ficar assim: 


public void pula() 1 
if(altura > RAIO) 1 
altura -= 150; 


Como alteramos o construtor do Passaro, apareceu um erro na classe 
Game. Basta passar a variável tela parao Passaro 


private void incializaElementos() { 
this.passaro = new Passaro(tela); 


VEO 
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Criando os canos superiores 


Ganhar um jogo que só possui canos embaixo é muito fácil, basta ficar vo- 
ando no alto. Está na hora de deixarmos nosso jogo mais difícil! Para isso, 
praticaremos os cálculos de dimensão de tela e os métodos de desenho que já 
vimos anteriormente. Nosso próximo passo é colocar canos não só embaixo, 
mas também em cima da tela. 

Não se esqueça de que o tamanho do cano inferior era igual ao tamanho 
da tela menos o tamanho do cano: 


this.alturaDoCanoInferior = tela.getAltura() - TAMANHO DO CANO; 


Portanto, é natural colocarmos o tamanho do cano superior como sendo 
o (ponto inicial da tela) mais o tamanho do cano: 


this.alturaDoCanoInferior = tela.getAltura() - TAMANHO DO CANO; 
O + TAMANHO DO CANO; 


this.alturaDoCanoSuperior 
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Mas ainda tem algo de estranho: nossos canos têm todos o mesmo ta- 
manho. Vamos aleatorizar um pouco essas dimensões pegando um número 
entre o e 150 para construir canos diferentes: 


this.alturaDoCanoInferior = 

tela.getAltura() - TAMANHO DO CANO - valorAleatorio(); 
this.alturaDoCanoSuperior = 

O + TAMANHO DO CANO + valorAleatorio(); 


Definimos o valorAlteatorio: 


private int valorAleatorio() 1 
return (int) (Math.random() * 150); 


Agora, precisamos desenhar o cano de baixo e o cano de cima. Para dese- 
nhar o cano superior, vamos criar um método desenhaCanoSuperiorNo: 


private final Paint VERDE = Cores.getCorDoCano(); 


public void desenhaNo (Canvas canvas) { 
desenhaCanoSuperiorNo (canvas); 
desenhaCanoInferiorNo(canvas) ; 


private void desenhaCanoSuperiorNo (Canvas canvas) { 
canvas.drawRect(??, ??, ??, ??, VERDE); 


private void desenhaCanoInferiorNo (Canvas canvas) { 
canvas.drawRect (posicao, alturaDoCanoInferior, 
posicao + LARGURA DO CANO, tela.getAltura(), VERDE); 


Vamos olhar com calma o conteúdo do método drawRect do 


desenhaCanoSuperiorNo 


canvas.drawRect(??, ??, ??, ??, VERDE); 
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Lembre-se de que os dois primeiros argumentos representam o canto su- 
perior esquerdo do retângulo e os outros dois são o seu canto inferior di- 
reito. Sendo assim, onde estará o canto superior esquerdo do nosso cano 
superior? No topo da tela! 


Logo, o segundo argumento deverá ser zero: 
canvas.drawRect(??, 0, ??, ??, VERDE); 


Qual deverá ser a altura do cano superior? Como já criamos uma variável 
alturaDoCanoSuperior, podemos passá-la diretamente ao quarto argu- 


mento: 


canvas.drawRect(??, O, ??, alturaDoCanoSuperior, VERDE); 


A altura do cano superior está definida. Vamos ver como ficará sua lar- 
gura. Como nosso cano superior deverá ter a mesma largura do cano infe- 
rior, devemos passar os mesmos valores para os dois. Como o cano inferior 
começa em posicao etem posicao + LARGURA DO CANO de largura, 
vamos passar esses mesmos valores para o cano superior! 


canvas.drawRect (posicao, 0, posicao + LARGURA DO CANO, 
alturaDoCanoSuperior, VERDE); 


Nosso método desenhaCanoSuperiorNo ficará assim: 


private void desenhaCanoSuperiorNo (Canvas canvas) 1 
canvas.drawRect (posicao, O, posicao + LARGURA DO CANO, 
alturaDoCanoSuperior, VERDE); 


Agora podemos rodar nosso jogo novamente e vemos que temos dez ca- 


nos com tamanhos diferentes para desviarmos! 
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Fig. 7.1: Canos com tamanhos diferentes. 


Mas nosso jogo ainda é muito curto. Cinco pares de canos passam muito 
rápido por nossa tela e ficamos sem ter mais o que fazer no jogo. Vamos fazer 
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com que os canos nunca parem de aparecer. Para isso precisamos de canos 
infinitos, mas como? 


7.1 CRIANDO INFINITOS CANOS 


Uma tática em jogos infinitos é de fazer com que quando o cano saia da tela, 
um novo cano seja colocado no fim de todos os canos: dessa maneira sempre 
temos a mesma quantidade de canos. Lembre-se de nosso método de mover 
canos: 


public void move() 1 
for(Cano cano : canos) | 
cano .move(); 


Após mover um cano, verificaremos se ele saiu da tela: 


for (Cano cano : canos) { 
cano .move(); 
if(cano.saiuDaTela()) { 
//0 que faremos? 


Caso ele tenha saído da tela, podemos criar outro Cano e adicioná-lo à 


nossa List<Cano>: 


for (Cano cano : canos) { 
cano .move(); 
if(cano.saiuDaTela()) { 
Cano outroCano = 
new Cano(tela, getMaximo() + DISTANCIA ENTRE CANOS); 
canos. add (outroCano) ; 


Perceba que tentamos adicionar um cano à mesma lista que é percorrida 





no for. Isso causará uma ConcurrentModificationException! Para 
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adicionar algo à lista que é percorrida, precisaremos de um ListIterator; 
para obtermos esse objeto basta chamar o método listIterator que toda 
List possui. Portanto, em vez de um for vamos alterá-lo para um while: 


ListIterator<Cano> iterator = canos.listIterator(); 
while(iterator .hasNext()) 1 
Cano cano = (Cano) iterator.next(); 
cano.move(); 


if (cano. saiuDaTela()) { 
Cano outroCano = 
new Cano(tela, getMaximo() + DISTANCIA ENTRE CANOS); 
iterator .add (outroCano) ; 


Para verificar se um cano saiu da tela, na classe Cano basta conferir se 


sua posição é menor que zero: 


public boolean saiuDaTela() { 
return posicao < O; 


Quase isso... O cano não sai da tela quando seu ponto esquerdo sai da 
tela, ele sai quando ele passou por completo (toda sua largura): 


public boolean saiuDaTela() { 
return posicao + LARGURA DO CANO < O; 


Agora só precisamos saber como faremos o método getMaximo. Temos 
que adicionar um novo Cano àqueles já existentes, em qual posição ele deverá 
ser colocado? 

Precisamos saber qual é o Cano que possui a maior posição (ou seja, o 
Cano mais à direita possível) da nossa lista para podermos determinar a po- 
sição do novo Cano. Então, basta percorrer nossa lista e comparar a posição: 


private int getMaximo() 1 
int maximo = O; 
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for(Cano cano : canos) { 
maximo = Math.max(cano.getPosicao(), maximo) ; 
} 


return maximo; 


Não se esqueça de fazer o getPosicao na classe Cano. 

Com isso, sempre teremos um novo Cano criado assim que algum sair 
da tela. Agora temos uma sequência infinita de canos dos quais o jogador 
precisa desviar! 

Neste momento, ao jogar o Jumper, veremos algo estranho conforme o 


tempo passa. O que será isso? 


7.2 DESCARTANDO CANOS ANTERIORES 


Conforme o tempo passa (e os Canos saem da tela), vamos criando outros 
Canos e adicionando-os à lista. Veja que ela está ficando cada vez maior, com 
mais elementos! A partir de um momento é de se esperar que teremos tantos 
Canos na nossa lista, que nosso aparelho não vai dar conta de gerenciá-los e 
o Jumper ficará bastante lento. 

Para resolver esse problema, podemos nos livrar de alguns Canos. Quais? 
Justamente aqueles que saíram da tela! 

Logo, seo Cano sair da tela, vamos removê-lo da lista! 

Vamos usar o método remove do Iterator assim que o cano sair da 
tela: 


ListIterator<Cano> iterator = canos.listIterator(); 
while(iterator.hasNext()) { 

Cano cano = (Cano) iterator.next(); 

cano .move(); 


if(cano.saiuDaTela()) { 
iterator.remove(); 
Cano outroCano = 
new Cano(tela, getMaximo() + DISTANCIA ENTRE CANOS); 
iterator.add (outroCano) ; 
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F 
} 

Rodando o jogo agora temos uma serie infinita de canos de tamanhos 
diferentes! 
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Fig. 7.2: Agora podemos gerar infinitos canos. 
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CAPÍTULO 8 


Criando a pontuação do jogo 


Chegou a hora de colocar uma maneira de nos desafiarmos no jogo: quantos 
pontos somos capazes de fazer? Para contá-los, ao inicializar o jogo devemos 


criar um novo objeto, a Pontuacao: 


private void inicializaElementos() 1 
this.pontuacao = new Pontuacao(); 
// outras inicializações 


Os pontos sobem cada vez que um Cano sai da tela, demonstrando a 
vitória do pássaro sobre os canos. No nosso método de movimento dos canos, 
devemos aumentar a pontuação toda vez que um cano sai da tela: 


public void move() { 
ListIterator<Cano> iterator = canos.listIterator(); 
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while(iterator.hasNext()) 1 
Cano cano = (Cano) iterator.next(); 
cano .move(); 


if (cano. saiuDaTela()) { 
pontuacao.aumenta(); 
iterator.remove(); 
Cano outroCano = 
new Cano(tela, getMaximo() + DISTANCIA ENTRE CANOS); 
iterator.add(outroCano) ; 


Para isso a classe Canos deve ter acesso à pontuação. Devemos passá-la 
no construtor durante a inicialização de nossos elementos: 


private void inicializaElementos() 1 
this.pontuacao = new Pontuacao(); 
this.passaro = new Passaro(); 
this.canos = new Canos(tela, pontuacao); 
Bitmap back = BitmapFactory.decodeResource(getResources(), 
R.drawable. background) ; 
this.background = Bitmap.createScaledBitmap (back, 
back.getWidth(), tela.getAltura(), false); 


E setar a variável no construtor: 


private final Pontuacao pontuacao; 


public Canos(Tela tela, Pontuacao pontuacao) { 
this.pontuacao = pontuacao; 
int posicaoInicial = 200; 


for (int i = O; i < QUANTIDADE DE CANOS; i++) 1 


posicaoInicial += DISTANCIA ENTRE CANOS; 
canos.add(new Cano(tela, posicaoInicial)); 
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Faltou criar o método de aumento de pontos dentro de nossa classe 


Pontuacao: 


public class Pontuacao { 
private int pontos = O; 


public void aumenta() 1 
pontos++; 


Pronto. Quando o cano sai da tela, notificamos a pontuação de que ela 
deve aumentar em um. Mas onde ela vai aparecer na tela? Assim como qual- 
quer outro elemento, vamos implementar o método desenhaNo, pedindo 
para desenhar um texto por meio do método drawText do canvas: 


public class Pontuacao { 
private static final Paint BRANCO = 
Cores.getCorDaPontuacao() ; 
private int pontos = O; 


public void aumenta() { 
pontos++; 


public void desenhaNo(Canvas canvas) { 
canvas.drawText (String.value0f (pontos), 100, 100, 
BRANCO) ; 


O método drawText recebe o texto a ser escrito, o ponto (x,y) onde esse 
texto deverá ser posicionado e sua cor. Vamos desenhar um texto na posição 
(100,100) da nossa tela na cor branca. 


Agora, basta definir a cor branca na classe Cores: 


public static Paint getCorDaPontuacao() { 
Paint branco = new Paint(); 
branco. setColor (0xFFFFFFFF) ; 
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return branco; 


E pedir para desenhar no nosso jogo: 
OUverride 
public void run() f 


while (isRunning) 1 
if (!holder.getSurface() .isValid()) continue; 


canvas = holder.lockCanvas(); 
canvas.drawBitmap (background, O, O, null); 


passaro.desenhaNo (canvas); 
passaro.cai(); 


pontuacao.desenhaNo (canvas); 


canos. desenhaNo (canvas); 
canos.move(); 


holder .unlockCanvasAndPost (canvas); 


Desse jeito, a pontuação ficou muito pequena. É bastante difícil enxergar 
o número no canto superior esquerdo da tela: 
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Fig. 8.1: Será que ficou legal para o jogador? 


Que tal colocarmos uma fonte maior e com bold (negrito)? Repare que 
o objeto Paint permite configurar diversas características relacionadas ao 
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elemento que estamos desenhando na tela. 


public static Paint getCorDaPontuacao() 1 
Paint branco = new Paint(); 
branco. setColor (0OxFFFFFFFF) ; 
branco.setTextSize(80); 
branco. setTypeface(Typeface.DEFAULT BOLD); 


return branco; 


Bem melhor! Agora é possível ver a pontuação sem problemas. 
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Fig. 8.2: Aumentando um pouco a fonte, ficou bem melhor, não? 


Podemos ir além e definir uma sombra para a nossa pontuação. A som- 
bra é um recurso comum utilizado pelo pessoal de design para dar destaque 
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em um texto que está por cima de uma imagem. Basta usarmos o método 


setShadowLayer do Paint: 
branco. setShadowLayer(??, ??, ??, ??); 


No último argumento dizemos qual a cor dessa sombra. No nosso caso, 
vamos deixá-la preta: 


branco. setShadowLayer(??, ??, ??, 0xFF000000); 


Temos que dizer qual será o deslocamento dessa sombra em relação ao 
texto original; quanto mais deslocada, mais visível ela estará, porém menos 
natural será sua aparência. Vamos deslocar 5 pixels para baixo e 5 pixels para 
a direita: 


branco. setShadowLayer(??, 5, 5, 0xFF000000); 


Agora, temos que dizer o quão definida será a borda dessa sombra. 
Quanto maior o valor, menos definidos serão os seus limites (mais “esfuma- 
çada” será). Vamos colocar um valor 3 para esse argumento: 


branco. setShadowLayer(3, 5, 5, OxFF000000) ; 


Pronto! Basta chamar esse método no get CorDaPontuacao: 


public static Paint getCorDaPontuacao() 1 
Paint branco = new Paint(); 
branco. setColor (0OxFFFFFFFF) ; 
branco.setTextSize(80); 
branco. setTypeface(Typeface.DEFAULT BOLD); 
branco. setShadowLayer(3, 5, 5, OxFF000000); 


return branco; 


Veja que a pontuação possui uma sombra: 
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Fig. 8.3: Pontuação com sombra para um maior destaque. 


Nosso jogo já parece bem legal! Porém, temos um pequeno problema: o 
que acontece com a pontuação quando os canos passam pela posição onde 
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ela está desenhada? 


Veja o loop principal da classe Game: 


QOverride 
public void run() 1 
while(isRunning) { 
//Lock canvas... 


canvas.drawBitmap (background, O, O, null); 
passaro.desenhaNo (canvas); 
passaro.cai(); 


pontuacao.desenhaNo (canvas); 


canos. desenhaNo (canvas); 
canos.move(); 


//Unlock... 


Perceba quea pontuacao é desenhada antes dos canos. Como o canvas 
trabalha com desenho por camadas, as camadas desenhadas primeiro ficarão 
por baixo das desenhadas posteriormente. 

Isso significa que os canos “passarão por cima” da nossa pontuação! 
Queremos que a pontuação sempre esteja visível ao jogador, então vamos 
apenas trocar a ordem das camadas: 


QOverride 
public void run() 1 
while(isRunning) { 
//Lock canvas... 


canvas.drawBitmap (background, O, O, null); 
passaro.desenhaNo (canvas); 


passaro.cai(); 


canos. desenhaNo (canvas); 
canos.move(); 
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pontuacao.desenhaNo (canvas); 


//Unlock... 


Veja que a pontuação agora fica em cima dos canos. Perfeito! 
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Fig. 8.4: A pontuação é exibida por cima dos canos. 


CAPÍTULO 9 


Tratando colisões 


Quando nosso jogo acaba? Quando o pássaro bater em qualquer cano. Mas 
como descobrir que um pássaro encostou no cano? Como nosso Passaro 
é um círculo eo Cano um retângulo, temos que descobrir se o círculo tem 
alguma intersecção com o retângulo. 

Caso nosso Passaro colida com algum Cano, podemos simplesmente 
cancelar o loop principal. Como temos uma variável isRunning que con- 


trola o loop, para cancelá-lo basta setar isRunning para false: 


if (new VerificadorDeColisao(passaro, canos) .temColisao()) 1 
isRunning = false; 


Ainda não temos a classe VerificadorDeColisao. Vamos criá-la no 
pacote engine. 
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Como precisamos verificar a colisão entreo Passaro eos Canos, vamos 
receber esses objetos no construtor da classe VerificadorDeColisao: 


public class VerificadorDeColisao { 


private final Passaro passaro; 
private final Canos canos; 


public VerificadorDeColisao(Passaro passaro, Canos canos) { 
this.passaro = passaro; 
this.canos = canos; 


public boolean temColisao() { 
return canos.temColisaoCom(passaro); 


Mas como implementar o algoritmo de colisão? Precisamos conferir que 
O Passaro não bateu em nenhum cano, portanto devemos passar por cada 
um dos canos da classe Canos: 


public boolean temColisaoCom(Passaro passaro) { 
for (Cano cano : canos) { 


} 


Se ele não bater em nenhum cano, não tem colisão: 


public boolean temColisaoCom(Passaro passaro) { 
for (Cano cano : canos) { 
J 


return false; 


Mas temos que descobrir se o Passaro bateu com o cano atual. Para isso 
verificaremos se ele colidiu verticalmente e horizontalmente: 


public boolean temColisaoCom(Passaro passaro) { 
for (Cano cano : canos) { 
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if (cano. temColisaoHorizontalCom(passaro) 
&& cano.temColisaoVerticalCom(passaro)) 1 
return true; 


} 


return false; 


Agora falta implementar os dois métodos de colisão na classe Cano. 

Para detectarmos uma colisão vertical entre o Passaro eo Cano 
inferior, basta sabermos quando a borda do pássaro toca o topo do 
cano. Ou seja, quando a altura do pássaro mais seu raio for maior que a 
alturaDoCanoInferior. Lembre-se que, quanto maior o valor da altura, 
mais baixo está o elemento! 

Para o cano superior, a ideia é semelhante: precisamos saber quando a 
borda superior do pássaro toca a base do cano superior. Para pegarmos a 
borda superior do pássaro basta subtrair o RAIO da sua altura. 


Com isso, temos o método temColisaoVerticalCom: 


public boolean temColisaoVerticalCom(Passaro passaro) { 
return passaro.getAltura() - 
passaro.RAIO < this.alturaDoCanoSuperior 
|| passaro.getAltura() + passaro.RAIO > 
this.alturaDoCanoInferior; 


Se a distância entre a posicao horizontal do cano e a posição x (ho- 
rizontal) do pássaro for menor que o seu RAIO, sabemos que houve uma 
colisão. O método temColisaoHorizontalCom tem esse conteúdo: 


public boolean temColisaoHorizontalCom(Passaro passaro) { 
return this.posicao - passaro.X < passaro.RAIO; 


Temos nosso VerificadorDeColisao pronto! Ao bater em um cano, 
o que acontece com o jogo? 
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9.1 CRIANDO A TELA DE GAME OVER 


Testamos o jogo e ele para repentinamente quando perdemos. Faltou algo 
mais bonito aqui, uma tela de fim de jogo, de game over. Vamos mudar nossa 
verificação de colisão para desenhar a tela de game over: 


if (new VerificadorDeColisao(passaro, canos) .temColisao()) 1 
new Game0Over (tela) .desenhaNo(canvas) ; 
isRunning = false; 


Nossa tela de game over deve ser construída no pacote elementos e ter o 
método de desenho tradicional: 


public class GameQ0ver { 
private final Tela tela; 


public Game0ver(Tela tela) 1 
this.tela = tela; 


public void desenhaNo (Canvas canvas) { 


} 


Vamos criar a fonte do texto de game over, uma fonte vermelha, com ne- 


grito e sombra, definida na classe Cores: 


public static Paint getCorDoGame0ver() { 
Paint vermelho = new Paint(); 
vermelho .setColor(0xFFFF0000); 
vermelho.setTextSize(50); 
vermelho.setTypeface(Typeface.DEFAULT BOLD); 
vermelho.setShadowLayer(2, 3, 3, 0xFF000000); 
return vermelho; 


Partimos para o desenho em si, primeiramente colocando o texto no meio 
da tela verticalmente (tela .getAltura() / 2),ã esquerda: 
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private static final Paint VERMELHO = Cores.getCorDoGameOver () ; 
public void desenhaNo (Canvas canvas) { 


String gamelver = "Game Over"; 
canvas.drawText (gamelver, O, tela.getAltura() / 2, VERMELHO); 
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Fig. 9.1: Game over exibido no jogo. 
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9.2 CENTRALIZANDO UM TEXTO HORIZONTALMENTE 
NA TELA 


O nosso Gameover já funciona mas ainda precisamos centralizá-lo na ho- 
rizontal. Este já passa a ser um problema um pouco maior. Para centralizar 
na horizontal temos que saber quanto o texto “Game Over” ocupa da tela 
e isso depende do tamanho da fonte, da tela etc. Felizmente, o objeto Paint 
pode nos ajudar e dizer quantos pixels serão necessários para desenhar essa 
String na tela. Com o método getTextBounds ficamos sabendo qual o 
tamanho do retângulo que engloba toda a nossa String: 


Rect limiteDoTexto = new Rect (); 
vermelho. getTextBounds(texto, O, texto.length(), limiteDoTexto); 


No método getTextBounds dizemos que queremos o retângulo ( 
limiteDoTexto) que engloba a String (texto), que começa na posi- 
ção O eterminaem texto.length (). 

Com isso, nosso limiteDoTexto passa a ser o retângulo que contém as 
dimensões exatas do texto (no caso, "Game Over”). Agora, basta desco- 
brir onde está o centro horizontal desse retângulo; se soubermos isso, pode- 
mos centralizá-lo horizontalmente na tela. 

Para encontrarmos o centro horizontal do nosso retângulo 
limiteDoTexto, basta dividir seu tamanho horizontal por 2. Mas 
qual é o seu tamanho horizontal? 

Seu tamanho horizontal depende de onde o retângulo começa ( left) e 
onde ele acaba ( right). Basta fazer: 


(limiteDoTexto.right - limiteDoTexto.left)/2 


Agora que temos o centro horizontal do retângulo limiteDoTexto, 
queremos centralizá-lo na tela e para isso vamos precisar da sua largura. 
Caso coloquemos nosso texto começando na metade da tela, ele não es- 
tará centralizado (somente a primeira letra estará realmente no centro); en- 
tão, vamos encontrar o centro horizontal da tela e “recuar” metade do nosso 
retângulo. Isso alinhará o centro do retângulo com o centro horizontal da 
tela: 
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int centroHorizontal = tela.getLargura()/2 - 
(limiteDoTexto.right - limiteDoTexto.left)/2; 


Com isso, nosso centralizaTexto ficará assim: 


private int centralizaTexto(String texto) { 
Rect limiteDoTexto = new Rect(); 
vermelho.getTextBounds (texto, O, texto.length(), 
limiteDoTexto); 
int centroHorizontal = tela.getLargura()/2 - 
(limiteDoTexto.right - limiteDoTexto.left)/2; 
return centroHorizontal; 


Precisamos também criar o getLargura na classe Tela, claro: 


public int getLargura() { 
return metrics.widthPixels; 


E mandar desenhar nossa String no centro horizontal: 


public void desenhaNo (Canvas canvas) { 


String gamelver = "Game Over"; 
int centroHorizontal = centralizaTexto (gamelver) ; 


canvas.drawText (gamelver, centroHorizontal, 


tela.getAltura()/2, VERMELHO) ; 


Agora sim podemos ver o resultado final. 
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Fig. 9.2: Game over é exibido centralizado na tela. 
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Aprimorando o layout do jogo 


Agora que temos toda a mecânica do jogo funcionando corretamente, vamos 
melhorar o aspecto visual dos elementos do Jumper substituindo o círculo do 
Passaro e os retângulos dos Canos por imagens bonitas! 

Vamos precisar de uma imagem para representar o Passaro, mas não se 
preocupe: todas as imagens que usaremos já estão no zip em https://github. 
com/felipetorres/jumper-arquivos. 

Tudo o que precisamos fazer é utilizar essa imagem no nosso jogo para 
substituir o círculo vermelho. Perceba que nossa imagem é basicamente um 
círculo, dessa forma podemos manter todas as contas de tamanho e colisão 
inalteradas! 


Para utilizar a imagem chamada passaro.png da pasta 





drawable-nodpi, vamos chamar o método decodeResource da 
classe BitmapFactory,da mesma forma como fizemos para o background: 
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Bitmap bp = BitmapFactory.decodeResource (context .getResources(), 
R.drawable.passaro); 


Qual tamanho essa imagem terá no nosso jogo? Será que é exatamente o 
mesmo tamanho do círculo vermelho? Temos que tomar cuidado com isso, 
pois se a imagem for maior (ou menor) teremos problemas no tratamento das 
colisões. 

Para garantir que as dimensões sejam as mesmas do círculo, no constru- 
tor da classe Passaro vamos redimensionar nossa imagem com o método 


createScaledBitmap e passar as dimensões que nosso círculo tinha! 


Bitmap bp = BitmapFactory.decodeResource (context. getResources(), 
R.drawable.passaro); 

this.passaro = Bitmap.createScaledBitmap(bp, RAIO+2, RAIOx2 , 
false); 


Como precisamos de um Context para o getResources, basta 
chamá-lo no construtor do Passaro. 

Veja que passamos RAIOx2 para a altura e largura do novo bitmap. 
Como nosso círculo tinha o raio do tamanho RATO, sua largura e altura eram 
RAIO+2; agora nossa imagem tem as mesmas dimensões que o círculo. 

Garantimos que nossa imagem está com o tamanho correto. Podemos 
garantir que essa imagem será desenhada com o mesmo posicionamento do 
círculo? 

Ao lidar com círculos, usamos o seu centro como referência de posicio- 
namento. Dissemos que seu centro estaria na posição (X, altura): 


canvas.drawCircle(X, altura, RAIO, vermelho); 


Porém, ao lidar com imagens (bitmaps), a referência para desenho é o 
canto superior esquerdo. Logo, se mantivermos (X, altura) para seu desenho, 


canvas.drawBitmap(passaro, X, altura, null); 


teremos uma imagem desalinhada com a posição original. Para arrumar 
isso, vamos centralizar a imagem em (X, altura). Como ela tem RAIO+2 de 
altura e largura, basta subtrair RAIO de ambas as coordenadas e teremos o 
bitmap centralizado: 
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canvas.drawBitmap(passaro, X-RAIO, altura-RAIO, null); 


Veja como ficará nossa aplicação: 








Fig. 10.1: Nosso pássaro ficou bem melhor, não? 
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10.1 SUBSTITUINDO OS RETÂNGULOS POR BITMAPS 


Vamos usar a mesma ideia anterior para substituir os retângulos dos Canos 
por bitmaps bonitos! Porém, em vez de possuir uma imagem para todo o 
cano, teremos apenas um “filete”, que será esticado para o mesmo tamanho 
dos retângulos iniciais. 

Assim como feito no Passaro, na classe Canos vamos utilizar o 
BitmapFactory para pegar a imagem. Precisaremos de um Context em 


seu construtor: 


Bitmap bp = BitmapFactory.decodeResource (context. getResources(), 
R.drawable.cano); 


Para o cano inferior, vamos redimensionar esse filete que está em bp para 
o tamanho correto. Veja que esse processo é bem simples, pois já temos as di- 
mensões guardadas em LARGURA DO CANO e alturaDoCanoInferior: 


this.canoInferior = Bitmap.createScaledBitmap (bp, 
LARGURA DO CANO, this.alturaDoCanoInferior, false); 


Para desenhar esse canoInferior na tela, devemos alterar o 
desenhaCanoInferiorNo. Atualmente, temos o seguinte código: 


private void desenhaCanoInferiorNo (Canvas canvas) { 
canvas.drawRect (posicao, alturaDoCanoInferior, 
posicao + LARGURA DO CANO, tela.getAltura(), VERDE); 


Lembre-se que os dois primeiros valores do drawRect represen- 
tam o canto superior esquerdo do retângulo. Da mesma forma que o 
drawBitmap! Ou seja, ao contrário do Passaro, no qual tivemos que fazer 
uma pequena correção, para os Canos já temos essas coordenadas prontas! 


canvas.drawBitmap(canoInferior, posicao, alturaDoCanoInferior, 
null); 
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Fig. 10.2: Canos inferiores agora são bitmaps também. 


Para os canos superiores, vamos fazer da mesma forma, porém não tere- 
mos que utilizar o BitmapFactory novamente, basta redimensioná-lo de 
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acordo com os retângulos superiores: 


this.canoSuperior = Bitmap.createScaledBitmap (bp, 
LARGURA DO CANO, this.alturaDoCanoSuperior, false); 


Vamos substituir o desenhaCanoSuperiorNo, onde chamávamos o 
drawRect, pelo drawBitmap, mas antes precisaremos da coordenada do 
seu canto superior esquerdo: 


private void desenhaCanoSuperiorNo (Canvas canvas) { 
canvas.drawRect (posicao, 0, posicao + LARGURA DO CANO, 
alturaDoCanoSuperior, VERDE); 


Como esse retângulo está com seu canto superior esquerdo em (posicao, 
O) teremos que usar essa mesma coordenada para nosso bitmap: 


private void desenhaCanoSuperiorNo (Canvas canvas) { 
canvas.drawBitmap(canoSuperior, posicao, 0, null); 


Ao término, temos nosso Jumper bem mais bonito e sem nenhuma mu- 
dança drástica no código! 
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Fig. 10.3: Aparência do Jumper com os bitmaps. 
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Adicionando som ao jogo 


Nosso jogo já está bastante divertido, com todo o necessário para desafiar os 
jogadores. Porém falta uma parte crucial de um jogo: sua música. Pense em 
todos os principais jogos do mercado, a maioria deles tem uma trilha sonora 
ou até mesmo um som marcante que cativa o jogador. 

No Jumper não vamos fazer todo o trabalho altamente complexo de um 
engenheiro de som, mas vamos ter sons para os principais momentos do jogo, 
como o pulo do pássaro, a colisão e aumento da pontuação! 

Para colocarmos um som em uma aplicação Android, a primeira solu- 
ção é utilizar a classe MediaPlayer do próprio Android. Essa classe é inte- 
ressante quando precisamos criar formas mais elaboradas de interação com 
sons. Pense em um aplicativo de música: nele temos os controles para play, 
stop, pause, avançar etc. Entretanto, em um jogo não precisamos de todos 
esses controles; na realidade só queremos tocar um som de curta duração e, 
no máximo, uma trilha sonora constante ao fundo. 
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Tendo em mente essa estrutura mais simples, temos a classe SoundPool, 
cujo objetivo é justamente fornecer uma forma mais leve para tocar sons de 
curta duração ideal para jogos! 

Ao instanciar um SoundPool podemos passar, no seu construtor, o tipo 
de som que será tocado, além de quantos arquivos simultâneos poderão ser 
tocados. Como temos três sons possíveis, setaremos esse valor para 3: 


SoundPool pool = new SoundPool(3, AudioManager.STREAM MUSIC, 0); 


Vamos criar uma classe responsável por gerenciar esse SoundPool. No 
pacote engine, criaremos a classe Som: 


public class Som { 
private SoundPool soundPool; 


public Som() 1 
soundPool = new SoundPool(3, AudioManager.STREAM MUSIC, 0); 


Para tocarmos algum som, antes precisaremos carregá-lo com o método 
load. Nele, passaremos o arquivo de som, que deverá estar na pasta res/raw. 
Se o carregamento for feito com sucesso, o load retornará um id que deverá 
ser usado sempre que quisermos tocá-lo. 


public class Som { 


private SoundPool soundPool; 
public static int PULO; 


public Som(Context context) { 
soundPool = new SoundPool(3, AudioManager.STREAM MUSIC, 0); 
PULO = soundPool.1oad(context, R.raw.pulo, 1); 

} 


Agora que temos o som PULO carregado, vamos tocá-lo com o método 
play, que recebe o id do som, o volume esquerdo, volume direito e, por úl- 
timo, a velocidade do som (Lembre-se: 1 é a velocidade normal). 
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soundPool.play(idDoSom, 1, 1, 1, 0, 1); 
Na nossa classe Som, teremos o seguinte código: 


public class Som { 


private SoundPool soundPool; 
public static int PULO; 


public Som(Context context) { 
soundPool = new SoundPool(3, AudioManager.STREAM MUSIC, 0); 
PULO = soundPool.1load(context, R.raw.pulo, 1); 

} 


public void play(int som) { 
soundPool.play(som, 1, 1, 1, 0, 1); 


Em qual momento tocaremos o som do pulo do pássaro? Quando o 
Passaro pular. Porém, em qual lugar do nosso código temos a lógica do 
pulo? No método pula da classe Passaro! 


public class Passaro { 


public void pula() { 
if (altura > RAIO) { 
som.play(Som.PULO); 
altura -= 150; 


Agora, basta receber o Som no construtor do Passaro: 


private Som som; 


public Passaro(Tela tela, Context context, Som som) { 
this.som = som; 
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Como mudamos o construtor do Passaro, quebramos a classe Game, 
que instancia o Passaro. Na classe Game, vamos instanciar o Som e passar 


parao Passaro: 


public class Game extends SurfaceView implements Runnable, 


OnTouchListenerí 


//Outras variáveis... 
private Som som; 


public Game (Context context) 1 
Dina 


this.som = new Som(context); 


private void inicializaElementos() 1 
this.passaro = new Passaro(tela, context, som); 


ff ia 


//Outros métodos... 


Com isso, nosso Passaro emitirá um som a cada pulo! 
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